<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>地区管理</title>
	<#include "../common/header.ftl" >
	<script src="/static/jquery/jquery-form/jquery.form.js" ></script>
	<script src="/static/jquery/jquery-bootstrap/jquery.bootstrap.min.js" ></script>


    <link rel="stylesheet" href="/static/jquery/treeview/bootstrap-treeview.min.css">
    <script src="/static/jquery/treeview/bootstrap-treeview.min.js" ></script>


	<script>
        $(function () {

            $.messager.model={
                ok:{text:"确定"},
                cancel:{text:"取消"}
            };

            //发ajax 查询跟地区
			$.get("/region/listByParentId.do",{type:"tree"},function (data) {
				//查询后使用treeview插件显示
				$("#treeview").treeview({
					data:[{text : '全部地区', nodes : data}],
					showTags : true,
					lazyLoad : function (node) { //当点击后查询显示子地区
						$.get("/region/listByParentId.do",{parentId:node.id,type:"tree"},function (data) {
							//添加子节点
							$('#treeview').treeview('addNode',[data,node]);
                        })
                    },

					//当点击节点时,查询当前节点的子节点数据
					onNodeSelected:function (event,data) {
						$.get("/region/listByParentId.do",{parentId:data.id},function(data){
							//把查询出来的数据添加到tbody中 , 此时需要一个模版

							//清空显示的tbody内容
							$('#tbody').empty();

							$.each(data,function(index,option){
								var content=$('#template tr').clone(true);
								$(content).find("td:nth-child(1)").html(index+1);
								$(content).find("td:nth-child(2)").html(option.name);
								//为按钮绑定数据
								$(content).find("a").attr("data-json",option.jsonString);
								$('#tbody').append(content)
							})
						})
                    }
				})
            });

			//编辑展示模态框
			$('.btu-input').click(function () {
                $('#myModal input').val('');
				var json = $(this).data('json');
                    $('#myModal #name').val(json.name);
                    $('#myModal #id').val(json.id);
                    $('#myModal #state').val(json.state);
                    $('#myModal #parentName').val(json.parentName);
                    $('#myModal #parentId').val(json.parentId);
                    $('#myModal').modal('show');
            });

			//新增模态框
			$('.btu-add').click(function () {
                $('#myModal input').val('');
				var selected = $('#treeview').treeview('getSelected');//获取到是一个数组
				if(selected.length>0){
                    $('#myModal #parentName').val(selected[0].text);
                    $('#myModal #parentId').val(selected[0].id);
                    $('#myModal').modal('show');
				}else{
                    $.messager.alert('温馨提示','请至少选择一个地区');
				}
            });


			//提交模态框表单
			$('.btu-submit').click(function () {
				$('#editForm').ajaxSubmit(function (data) {
					if(data.success){
						$.messager.alert('温馨提示','操作成功!  2s后刷新页面');
						setTimeout(function () {
							window.location.reload();
						},2000);
					}
				})
            })




        })
	</script>
</head>
<body>
<!--设置用于菜单回显-->
<#assign currentMenu="region">
<div class="container " style="margin-top: 20px">
	<#include "../common/top.ftl" >
	<div class="row">
		<div class="col-sm-3">
			<#include "../common/menu.ftl" >
		</div>
		<div class="col-sm-9">
			<div class="row">
				<div class="col-sm-12">
					<h1 class="page-head-line">地区管理</h1>
				</div>
            </div>


            <div class="col-sm-12">
			<a  class="btn btn-success btu-add " data-json=''>添加</a>
            </div>

            <div class="col-sm-4">
                <ul id="menu" class="list-group">
                    <li class="list-group-item">
						<div id="treeview">

						</div>
                    </li>
                </ul>
            </div>

            <div class="col-sm-8">
				<table class="table table-striped table-hover" >
					<thead>
					<tr>
						<th>编号</th>
						<th>地区名称</th>
					</tr>
					</thead>
					<tbody id="tbody">

					</tbody>
				</table>
            </div>

		</div>
	</div>
</div>

<#-- 模版 -->
<table id="template" style="display: none" >
    <tr>
        <td></td>
        <td></td>
		<td>
			<a class="btn btn-info btn-xs btu-input" data-json='${(region.jsonString)!}'>
				<span class="glyphicon glyphicon-pencil"></span>编辑
			</a>
			<#--<a  class="btn btn-danger btn-xs btu-delete" data-url='/systemDictionaryItem/delete.do?id=${systemDictionaryItem.id}'>
				<span class="glyphicon glyphicon-trash"></span>删除
			</a>-->
		</td>
	</tr>
</table>


<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">地区编辑</h4>
            </div>
            <div class="modal-body">
			<#--编辑输入框-->
                <form class="form-horizontal" action="/region/saveOrUpdate.do" method="post" id="editForm">
                    <div class="form-group" >
                        <label for="name" class="col-sm-2 control-label">名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="name" name="name"  placeholder="请输入地区名称">
                            <input type="hidden" class="form-control" id="id" name="id"  >
                        </div>
                    </div>
                    <div class="form-group" >
                        <label for="state" class="col-sm-2 control-label">名称：</label>
                        <div class="col-sm-6">
							<select class="form-control" id="state" name="state">
								<option value="0">普通</option>
								<option value="1">热门</option>
							</select>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label for="sn" class="col-sm-2 control-label">上级地区：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="parentName" name="parent.name" readonly>
                            <input type="hidden" class="form-control" id="parentId" name="parent.id" >
                        </div>
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btu-submit">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
</html>